<template>
<!-- 小节表单对话框 -->
    <el-dialog title="添加小节" @close="close()" :visible.sync="dialogVideoFormVisible">
        <el-form :model="video" label-width="120px">
            <el-form-item label="课时标题" :label-width="formLabelWidth">
                <el-input v-model="video.title" />
            </el-form-item>
            <el-form-item label="课时排序" :label-width="formLabelWidth">
                <el-input v-model="video.sort" :min="0" controls-position="right" />
            </el-form-item>
            <el-form-item label="是否免费">
                <el-radio-group v-model="video.isFree">
                  <el-radio :label="1">免费</el-radio>
                  <el-radio :label="0">默认</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="上传视频">
                <el-upload 
                    :auto-upload="false"
                    :on-success="handleUploadSuccess"
                    :on-error="handleUploadError"
                    :on-exceed="handleUploadExceed"
                    :before-remove="handleBeforeRemove"
                    :on-remove="handleOnRemove"
                    :file-list="fileList"
                    :limit="1" 
                    ref="upload"
                    :action="BASE_API + '/vod/upload'">
                    <el-button slot="trigger" size="mini" type="warning">选择视频</el-button>
                    <el-button 
                        :disabled="uploadBtnDisabled" 
                        style="margin-left:10px"
                        size="small" 
                        type="success"
                        @click="submitUpload()">上传</el-button>
                </el-upload>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import video from "@/api/teacher/video"
export default {
    data() {
        return {
            BASE_API:process.env.BASE_API,
            dialogVideoFormVisible:false,
            fileList:[], //上传文件列表
            uploadBtnDisabled:false,
            video:{
                title:'',
                sort:0,
                isFree:0,
                videoSourceId:'',
                videoOriginalName:''
            }
        }
    },
    methods: {
        //上传多于1个视频
        handleUploadExceed(files,fileList){
            this.$message.warning('想要重新上传，请先删除已上传的视频')
        },
        submitUpload(){
            this.uploadBtnDisabled = true
            //提交上传请求
            this.$refs.upload.submit()
        },
        //视频上传成功的回调
        handleUploadSuccess(response,file,fileList){
            this.uploadBtnDisabled = false
            if(response.success){
                this.video.videoSourceId = response.data.videoId
                this.video.videoOriginalName = file.name
            }else{
                this.$message.error('上传失败(非200)')
            }
        },
        //失败回调
        handleUploadError(){
            this.uploadBtnDisabled = false
            this.$message.error('上传失败(http))')
        },
        //删除视频确认
        handleBeforeRemove(file,fileList){
            return this.$confirm(`确定移除${file.name}?`)
        },
        //删除视频
        handleOnRemove(file,fileList){
            if(!this.video.videoSourceId){
                return
            }
            video.removeVideoById(this.video.videoSourceId)
            .then( res =>{
                this.video.videoSourceId = ''
                this.video.videoOriginalName = ''
                //删除视频的同时更新video数据
                video.updateVideo(this.video)
                this.$message.success(res.message)
            })
        },
        open(chapterId,videoId){
            this.dialogVideoFormVisible = true
            this.video.chapterId = chapterId
            
            if(videoId){
                video.getVideo(videoId)
                .then(res =>{
                    this.video = res.data.video
                    console.log(this.video)
                    //回显视频列表
                    if(this.video.videoSourceId){
                        this.fileList = [{'name':this.video.videoOriginalName}]
                    }
                })
            }
        },
        close(){
            this.dialogVideoFormVisible = false
            this.reset()
        },
        reset(){
            this.video ={
                title:'',
                sort:0,
                free:false,
                videoSourceId:''
            }
            this.fileList = []
        },
        //添加小节
        saveVideo(){
            //设置课程ID
             this.video.courseId = this.$parent.$parent.courseId
             video.addVideo(this.video)
            .then(res => {
                //提示信息
                this.$message({
                            type:'success',
                            message:'添加小节成功!'
                        })
                //关闭弹窗
                this.close()
                //刷新页面
                this.$parent.getChapterVideo()
            })
        },
        updateVideo(){
            video.updateVideo(this.video)
            .then(res => {
                //提示信息
               this.$message({
                            type:'success',
                            message:'修改小节成功!'
                        })
                //关闭弹窗
               this.close()
                //刷新页面
                this.$parent.getChapterVideo()
            })
        },
        saveOrUpdateVideo(){
            if(!this.video.id){
                 this.saveVideo()
            }else{
                this.updateVideo()
            }
        }
    }
}
</script>